<template>
  <div>
    我是{{ name }}，今天我很{{ happy ? '开心' : '不开心' }}
    <div @click="changeHappy">改变心情</div>
  </div>
</template>

<script setup>
import {ref, watch} from 'vue'

const name = ref('jerry')
const happy = ref(true)
const changeHappy = () => {
  happy.value = !happy.value
  name.value = happy.value ? 'tom' : 'jerry'
}
// 常规写法1
watch(happy, (newValue, oldValue) => {
  console.log('watch--1haapy被修改了', newValue, oldValue)
})
// 常规写法2用的比较多
watch(happy, (newValue) => {
  console.log('watch--2haapy被修改了', newValue)
})
// 同时兼听多个
watch([name, happy], (nameArray, happyArray) => {
  // 注意nameArray, happyArray都为数组
  // Array [ "jerry", false ] Array [ "tom", true ]
  console.log('watch--name被修改了', nameArray, happyArray)
})
watch([name, happy], ([newValue, oldValue], [newValue2, oldValue2]) => {
  console.log('watch--name被修改了', newValue, oldValue, 'happy被修改了', newValue2, oldValue2)
})

/*export default {
  name: "App",
  data() {
    return {
      name: 'jerry',
      happy: true,
    }
  },
  watch: {
    // happy(newValue, oldValue) {
    //   console.log('watch--1haapy被修改了', newValue, oldValue)
    // }
    happy: {
      immediate: true,// 初始化时让handler调用一下
      deep: true,// 深度监听
      handler(newValue, oldValue) {
        console.log('watch--2haapy被修改了', newValue, oldValue)
      }
    }
  },
  methods: {
    changeHappy() {
      this.happy = !this.happy
    }
  }
}*/
</script>

<style scoped>

</style>